<template>
  <div>
    <el-container class="guanglicontainer">
      <el-header class="hedaer-">
        <el-row class="mianbaoxie">
          <div class="mianbaoxie">
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              class="mianbaoxie"
            >
              <el-breadcrumb-item :to="{ path: '/保险管理' }"
                >保险管理</el-breadcrumb-item
              >
              <el-breadcrumb-item>保险管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </el-row>
      </el-header>
      <el-main class="main1">
        <el-row>
          <div class="clearable2">
            <div class="clearable1">
              <el-button type="primary" @click="onSubmit" class="el-icon-plus"
                >添加保单</el-button
              >
            </div>
            <div class="clearable">
              <el-input
                placeholder="请输入需要查询的用户名或者手机号"
                v-model="input"
                clearable
                class="shuruk"
              >
              </el-input
              ><el-button type="primary" icon="el-icon-search" @click="cahxun"
                >搜索</el-button
              >
            </div>
          </div>

          <table class="thad">
            <thead>
              <tr>
                <th>序号</th>
                <th>被保险人姓名</th>
                <th>手机号</th>
                <th>交强起始时间</th>
                <th>交强终止时间</th>
                <th>商业起始时间</th>
                <th>商业终止时间</th>
                <th>保险价格</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in nuerlist" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.cname }}</td>
                <td>{{ item.cphone }}</td>
                <td>{{ item.mandatoryBegin }}</td>
                <td>{{ item.mandatoryExpiredate }}</td>
                <td>{{ item.commercialBegin }}</td>
                <td>{{ item.commercialExpiredate }}</td>
                <td>{{ item.price }}</td>

                <el-dialog title="修改" :visible.sync="dialogFormVisible">
                  <el-form :model="form">
                    <el-form-item
                      label="公司名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.name"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="公司短名"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.namedm"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="公司报案电话"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.tel"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>

                    <el-form-item
                      label="是否支付垫付"
                      :label-width="formLabelWidth"
                    >
                      <el-radio v-model="form.saubut" label="1">是</el-radio>
                      <el-radio v-model="form.saubut" label="2">否</el-radio>
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                      <el-input
                        v-model="form.dizhi"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="duxiao">取 消</el-button>
                    <el-button type="primary" @click="qudingxiugai(item)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </tr>
            </tbody>
          </table>

          <el-col :span="8" :offset="8">
            <el-pagination
           
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
            
              :page-size="pagesize"
              layout="total, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
     total:0,
      currentPage4: 1, //当前显示第几页
      pagesize:10, //一页显示6条
      input:'' , //搜索查询的输入框
      nuerlist: [

      ],


      // motankuang
       dialogTableVisible: false,
        dialogFormVisible: false,
        // 修改的模态框变量
        form: {
          name: '',
          saubut:"1",
          namedm:'',
          tel:'',
          dizhi:'',
          delivery: false,
          type: [],
        
          
        },
        formLabelWidth: '120px'
    };
  },
  methods: {
    formData(now){
      const date = new Date(now)
      var y = date.getFullYear() // 年份
      var m = date.getMonth() + 1 // 月份，注意：js里的月要加1
      var d = date.getDate() // 日
      var h = date.getHours() // 小时
      var min = date.getMinutes() // 分钟
      var s = date.getSeconds() // 秒
	 // 返回值，根据自己需求调整，现在已经拿到了年月日时分秒了 
      return y + '-' + m + '-' + d 

     },
    onSubmit() {
      this.$router.push("/home/TianJia")
    },
    cahxun(){
         this.nuerlist=[] 
    this.$axios({
    url:'/InsuranceManagement/list',
    method:'post',
    data:{
        cname: this.input,
     
      page:this.currentPage4,
      limit:this.pagesize
    }
  }).then(res=>{
    console.log(res);
    if(res.data.code==0){
        this.nuerlist=res.data.data
        this.nuerlist.forEach(item => {
              item.mandatoryBegin =this.formData( item.mandatoryBegin)
              item.mandatoryExpiredate =this.formData( item.mandatoryExpiredate)
               item.commercialBegin =this.formData( item.commercialBegin)
              item.commercialExpiredate =this.formData( item.commercialExpiredate)
        });
    }
    console.log(res);
  })
    },
    /////////////////分页
    handleCurrentChange(val) {
  
     this.http(val)
    
      
      console.log(`每页 ${val} 条`);
    },
  
    // 修改的模态框
    xiugai(item,val){
  this.dialogFormVisible=true
  console.log(val);
  console.log(item);
  this.form=item
       
  
  console.log(this.form.saubut);
    },
    // 确定修改
    qudingxiugai(item){    
       if( this.form==item){
            this.dialogFormVisible=false
       }else{
        alert("请输入你要修改的内容")
         this.dialogFormVisible=true
       }
         
    },
    duxiao(){
      this.dialogFormVisible=false
    },
    // 删除
    shanchu(val){
       this.nuerlist.splice(val,1)
    },
    http(page){
       this.$axios({
    url:'/InsuranceManagement/list',
    method:'post',
    data:{
      page:page,
      limit:this.pagesize
    }
  }).then(res=>{
    console.log(res);
    if(res.data.code==0){
        this.nuerlist=res.data.data
        this.total=res.data.count
        this.nuerlist.forEach(item => {
              item.mandatoryBegin =this.formData( item.mandatoryBegin)
              item.mandatoryExpiredate =this.formData( item.mandatoryExpiredate)
               item.commercialBegin =this.formData( item.commercialBegin)
              item.commercialExpiredate =this.formData( item.commercialExpiredate)
        });
    }
    console.log(res);
  })
    },
  },
  computed: {
    nowtableaut() {
      return (
        this.nuerlist.slice(
          (this.currentPage4 - 1) * this.pagesize,
          this.currentPage4 * this.pagesize
        ) || []
      );
    },
  },
  created(){
    console.log("aaaa");
     this.nuerlist=[] 
    this.http(1)
  }
  };
</script>

<style lang="less" scoped>
.fenye {
  float: left;
  text-align: center;
}
.thad {
  width: 100%;
  text-align: center;
  line-height: 50px;
}
.el-icon-plus {
  margin: 20;
}
.mianbaoxie {
  /* margin-top: 20px; */
  height: 60px !important;
  line-height: 60px !important;
  border-bottom: 1px solid #425877;
  /* background-color: rgb(199, 173, 173); */
  font-size: 20px;
}
.addinsurance {
  margin-bottom: 30px;
  float: left;
  height: 80px;
  line-height: 80px;
}
.clearable {
  width: 400px;
  margin-left: 100px;
}
.clearable1 {
  float: left;
  width: 150px;
  margin-left: 10px;
}
.clearable2 {
  float: left;
  width: 35%;
  height: 80px;
  border: 1px solid rgba(128, 127, 127, 0.144);
  line-height: 80px;
  margin-bottom: 30px;
}
.shuruk {
  width: 200px;
  margin-right: 20px;
}
</style>